@require('../../styles/variables')
@require('../../../../components/grid/variables.styl')

circle-width = 270px

.index-page
    .header-wrapper
        header
            width 100% // $page-width
    .content-wrapper
        position absolute
        top 0
        width 100% // $page-width
        background url('../../imgs/bg.png')
        background-size 20px 20px
        box-sizing border-box
        text-align center
    .pages
        .k-row
            height 100vh
        .k-col
            display flex
            flex-direction column
            justify-content center
            align-items center
        figure
            flex 1
            width 80%
            line-height 100vh
        img
            width 100%
            vertical-align middle
    .first-page-left
        h1
            font-size 5em
            font-weight 600
            font-family Arial
        h2
            span:nth-child(1)
                color $primary-color
            span:nth-child(2)
                color $danger-color
            span:nth-child(3)
                color $success-color
        p
            font-size 2em
            font-weight 300
            color #46484a
            margin 10px 0 20px 0
        .button
            padding 0 2em
            margin-right 20px
            height 3em
            line-height 3em
        .wrapper
            text-align left
    .second-page-right
        .info
            text-align left
            .feature
                margin-bottom 30px
                font-size 18px
                h2
                    margin-bottom 10px
                    font-size 30px
    .circle-bg
        width circle-width
        height @width
        border-radius 50%
        background #8195FD
        position fixed
        &.left
            left -(circle-width / 2)
            bottom @left
        &.right
            right -(circle-width / 5 * 4)
            top @right

@media (max-width: $lg-min-width)
    .index-page
        .content-wrapper
            position relative
        .first-page
            .wrapper
                text-align center
            .button
                margin 0 10px
        .second-page-right
            .info
                text-align center
                padding 50px 0
        .circle-bg.left
            display none
        .pages
            figure
                line-height 100vw 

